<template>
    <div class="education-container">
    <!-- 顶部内容 -->
    <div class="header">
      <h1>农教中心</h1>
          <p>获取最新农业知识，与专家面对面交流</p>
    </div>
  
    <!-- 主内容区域 -->
    <router-view class="content-area" />
  
    <!-- 底部导航栏 -->
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      class="bottom-nav"
      @select="handleNavSelect"
    >
      <el-menu-item index="/">
        <i class="iconfont icon-shop"></i>
        <span>商城</span>
      </el-menu-item>
      <el-menu-item index="/edu">
        <i class="iconfont icon-edu"></i>
        <span>农教</span>
      </el-menu-item>
      <el-menu-item index="/community">
        <i class="iconfont icon-community"></i>
        <span>社区</span>
      </el-menu-item>
    </el-menu>
  
     <!-- 新增侧边菜单按钮 -->
     <el-button
          type="primary"
          icon="el-icon-menu"
          class="menu-trigger"
          @click="drawerVisible = true"
        ></el-button>
    
        <!-- 左侧抽屉菜单 -->
        <el-drawer
          v-model="drawerVisible"
          :with-header="false"
          :size="240"
          :before-close="handleClose"
        >
          <el-menu
            :default-active="$route.path"
            mode="vertical"
            @select="handleMenuSelect"
          >
            <el-menu-item index="/community/experts">
              <i class="iconfont icon-topic"></i>
              <span>专家库</span>
            </el-menu-item>
            <el-menu-item index="/community/courses">
              <i class="iconfont icon-courses"></i>
              <span>科普信息</span>
            </el-menu-item>
            <el-menu-item index="/community/ai">
              <i class="iconfont icon-ai"></i>
              <span>AI助手</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </div>
    </template>
    
  
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  const router = useRouter()
  const drawerVisible = ref(false)
  
  const handleMenuSelect = (key: string) => {
  router.push(key).catch(err => {
    if (!err.message.includes('Avoided redundant navigation')) throw err
  })
  drawerVisible.value = false // 关闭抽屉
  }
  const handleClose = () => {
  drawerVisible.value = false
  }
  const handleNavSelect = (key: string) =>{
  if (key === '/') {
    //保持在当前页面
    router.replace({ path: '/'})
  } else {
    router.push(key)
  }
  }
  </script>
  
  <style scoped>
  .education-container {
  min-height: 100vh;
  position: relative;
  }
  
  .menu-trigger {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  }
  
  .content-area {
  padding: 20px;
  margin: 60px 0 80px 0; /* 为导航和侧边栏留出空间 */
  }
  
  .bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  }
  
  .el-drawer {
  background: #f5f7fa;
  }
  
  @media (max-width: 768px) {
  .menu-trigger {
    top: 10px;
    right: 10px;
  }
  
  .el-drawer {
    width: 100% !important;
  }
  }
  </style>
  